@inherits AppComponentBase

@* This component gets shown by the PromptService to prompt the user for input. *@

<section>
    <BitStack Gap="0">
        <BitStack Horizontal AutoHeight Class="header-stack">
            <BitText Typography="BitTypography.H5" Color="BitColor.Tertiary">
                @Title
            </BitText>

            <BitSpacer />

            <BitButton OnClick="CloseModal"
                       Color="BitColor.Tertiary"
                       Variant="BitVariant.Text"
                       IconName="@BitIconName.ChromeClose" />
        </BitStack>

        <BitStack HorizontalAlign="BitAlignment.Center" Class="stack">
            <BitText Color="BitColor.Tertiary" Style="white-space:break-spaces;max-width:500px;">
                @Body
            </BitText>
            @if (OtpInput)
            {
                <BitOtpInput @bind-Value="value"
                             AutoFocus
                             Length="6"
                             Size="BitSize.Large"
                             Type="BitInputType.Number"
                             Style="justify-content:center"
                             OnFill="WrapHandled(async (string? otp) => OnOk?.Invoke(value))" />
            }
            else
            {
                <BitTextField @bind-Value="value"
                              AutoFocus
                              Immediate
                              OnEnter="WrapHandled(async (KeyboardEventArgs args) => OnOk?.Invoke(value))" />
            }

            <BitStack Alignment="BitAlignment.Center" AutoHeight>
                <BitButton OnClick="OnOkClick" Color="BitColor.Tertiary">
                    @Localizer[nameof(AppStrings.Ok)]
                </BitButton>
            </BitStack>
        </BitStack>
    </BitStack>
</section>
